<script type="text/x-template" id="cc-virtual-panel-group-tpl">
    <div class="cc-virtual-panel-group">
        <template v-if="panel.panelList">
            <template v-if="panel.parentType === 'group'">
                <el-tabs
                        type="card"
                        :value="active + ''"
                        @input="$emit('activate', $event)"
                >
                    <el-tab-pane
                            v-for="(item, index) in panel.panelList"
                            :key="index"
                            :name="index + ''"
                    >
                        <span slot="label">{{ item.type }}</span>
                        <cc-virtual-panel
                                :blocks="item"
                        >
                        </cc-virtual-panel>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <cc-virtual-panel
                    v-else
                    :blocks="panel.panelList[0]"
            >
            </cc-virtual-panel>
        </template>
    </div>
</script>


<script>
    Vue.component('cc-virtual-panel-group', {
        template: '#cc-virtual-panel-group-tpl',
        props: ['panel', 'active'],
        methods: {}
    })
</script>
<style>
    .cc-virtual-panel-group .el-tab-pane {
        overflow-x: auto;
    }
</style>